<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <!-- include summernote css/js -->


    <!--common-->
    <link href="css/style.css" th:href="@{/css/style.css}" rel="stylesheet">
    <link href="css/style-responsive.css" th:href="@{/css/style-responsive.css}" rel="stylesheet">

    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 500px;
        }


        .inputBox {
            position: relative;
            width: 500px;
        }

        .inputBox input {
            width: 100%;
            padding: 10px 0 5px;
            background: transparent;
            outline: none;
            box-shadow: none;
            border: none;
            color: #fff;
            font-size: 2em;
            letter-spacing: 0.1em;
            transition: 0.5s;
        }

        .inputBox span {
            position: absolute;
            left: 0;
            padding: 10px 0 5px;
            pointer-events: none;
            font-size: 2em;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            /* 定义无小写字母，仅有大写字母 */
            letter-spacing: 0.1em;
            /* 是增加（值为正）或减少（值为负）字符间距 */
            transition: 0.5s;
        }

        .inputBox input:valid ~ span,
            /* 表单元素的值需要根据指定条件验证时设置指定样式 */

        .inputBox input:focus ~ span

            /* 选择具有焦点的时候 */
        {
            color: #b0a4e3;
            transform: translateY(-16px);
            /* 将文字向Y轴（向上）平移16px */
            font-size: 0.65em;
        }

        .inputBox i

            /* 可见的一个线 */
        {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background: #fff;
            overflow: hidden;
        }

        .inputBox i::before

            /* 在i标签的左边创建（伪元素）一个跟i等大的一条线，加上炫彩颜色 */
        {
            content: '';
            position: absolute;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, #EEBD89, #D13ABD, #C973FF, #6CC6CB, #9FA5D5, #EAD6EE);
            animation: runing 1s linear infinite;
            transition: 0.5s;
        }

        .inputBox input:valid ~ i::before,
        .inputBox input:focus ~ i::before {
            left: 0;
        }

        /* 创建动画 */
        @keyframes runing {
            0% {
                background-position-x: 0;
            }

            100% {
                background-position-x: 250px;
            }
        }

        /*    打卡start*/
        .c1 {
            /* 弹性布局 */
            display: flex;
            /* 水平排列 */
            flex-direction: row;
            /* 允许换行 */
            flex-wrap: wrap;
            justify-content: space-around;
            width: 500px;
            margin-left: 350px;
        }

        .c1 .c2 {
            /* 相对定位 */
            position: relative;
            width: 400px;
            height: 60px;
            background: none;
            /* 设置边框 */
            border: 4px solid;
            border-radius: 20px;
            /* 自定义边框颜色 */
            color: var(--c);
            /* 鼠标移入时，光标变成小手 */
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            margin: 20px;
        }

        /* 分别设置四个框的颜色 */
        .c1 .c2:nth-child(1) {
            --c: #F2F2F2;
        }

        .c1 .c2:nth-child(2) {
            --c: #93edd4;
        }

        .c1 .c2:nth-child(3) {
            --c: #f9cb8f;
        }

        .c1 .c2:nth-child(4) {
            --c: #ffb1a3;
        }

        /* 设置上下缺口 */
        .c1 .c2::before, .c1 .c2::after {
            content: "";
            /* 绝对定位 */
            position: absolute;
            width: 14px;
            height: 4px;
            /* 缺口颜色与背景颜色一致 */
            background-color: #000000;
            /* 沿X轴倾斜30° */
            transform: skewX(30deg);
            /* 设置动画效果 */
            transition: 0.5s linear;
        }

        /* 设置上下缺口位置 */
        .c1 .c2::before {
            top: -4px;
            left: 50%;
        }

        .c1 .c2::after {
            bottom: -4px;
            right: 20%;
        }

        /* 光标移入时，缺口位置变换 */
        .c1 .c2:hover::before {
            left: 80%;
        }

        .c1 .c2:hover::after {
            right: 80%;
        }


    </style>
    <!--    <link href="css/boketiao.css" th:href="@{/css/boketiao.css}" rel="stylesheet">-->
    <!--    <link href="css/boketiao_1.css" th:href="@{/css/boketiao_1.css}" rel="stylesheet">-->

    <title>坚持笔记</title>

    <!--    <div th:include="common :: commonHeader"></div>-->

</head>

<body class="sticky-header">

<section>
    <!--    <div th:replace="common::#leftmenu"></div>-->

    <!-- main content start-->
    <!--    <div class="main-content">-->

    <!--        <div th:replace="common::headermenu"></div>-->

    <!-- page heading start-->


    <div class="page-heading">

        <h3 style="color: wheat">
            笔记原创，奖金多多
        </h3>
        <div class="c1">
            <a href="http://118.31.60.43">失去编辑，返回主页</a>
        </div>

        <div style="color: lightgoldenrodyellow;size: 24px;float: right;padding-right: 40px;">
            欢迎您，杨园园
            <span style="color: lightgoldenrodyellow;size: 24px" th:text="${name}">

        </span>
        </div>

        <!--            <ul class="breadcrumb">-->
        <!--                <li>-->
        <!--                    <a href="#">Dashboard</a>-->
        <!--                </li>-->
        <!--                <li>-->
        <!--                    <a href="#">Data Tables</a>-->
        <!--                </li>-->
        <!--                <li class="active"> Dynamic Table</li>-->
        <!--            </ul>-->
        <div style="float: right">
            <!--            <button  class="btn btn-success" id="emp_add_modal_btn" style="margin: 1rem;height: 4rem;width: 100px">打卡</button>-->

            <!--            <div class="c1">-->
            <!--                <button class="c2" id="punchCard">点赞</button>-->
            <!--            </div>-->




        </div>
    </div>


    <!-- page heading end-->

    <div>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="profile">

                <div class="inputBox" style="margin: 15px">

                    <input type="text" required="required" id="bigTitleInfo">
                    <span id="noteTitle">输入笔记标题</span>
                    <i></i>
                </div>

                <!--抽取start-->
                <div id="editor—wrapper">
                    <div id="toolbar-container"><!-- 工具栏 --></div>
                    <div id="editor-container"><!-- 编辑器 --></div>
                    <button class="btn btn-success" id="emp_add_modal_btn3" style="margin: 1rem;height: 4rem">一键提交
                    </button>
                </div>
                <!--抽取end-->
                <div style="color: #F3F4F6">


                </div>


            </div>



        </div>

    </div>

</section>


<!-- 员工添加Modal -->

<!--<div th:replace="common::commonScript"></div>-->
<!--dynamic table-->
<script type="text/javascript" language="javascript" src="js/advanced-datatable/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>
<!--dynamic table initialization -->
<script src="js/dynamic_table_init.js"></script>
<!-- Placed js at the end of the document so the pages load faster -->
<script th:src="@{/js/jquery-1.10.2.min.js}"></script>
<script th:src="@{/js/jquery-ui-1.9.2.custom.min.js}"></script>
<script th:src="@{/js/jquery-migrate-1.2.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/modernizr.min.js}"></script>
<script th:src="@{/js/jquery.nicescroll.js}"></script>
<!--common scripts for all pages-->
<script th:src="@{/js/scripts.js}"></script>


<!--富文本编辑器-->
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<!--富文本编辑器AJAX-->
<script>
    const {createEditor, createToolbar} = window.wangEditor

    const editorConfig = {
        placeholder: 'Type here...',
        onChange(editor) {
            const html = editor.getHtml()
            console.log('editor content', html)
            // 也可以同步到 <textarea>
        }
    }

    const editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'simple', // or 'simple'
    })

    const toolbarConfig = {}

    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'simple', // or 'simple'
    })


    $("#emp_add_modal_btn3").click(function () {
        const fromEditorInfo = editor.getHtml();
        const bigTitleInfo = document.getElementById("bigTitleInfo").value;

        $.ajax({
            url: "/FromEditorInfo",
            type: "post",
            data: {
                'htmlInfo': fromEditorInfo,
                'bigTitleInfo': bigTitleInfo
            },
            success: function (data) {
                window.open('http://118.31.60.43', '_self');
            },
            error: function (errormsg) {

            }
        });
    });


    $("#confirmTitleBtn").onmouseout(function () {
        $.ajax({
            url: "/FromBigTitleInfo",
            type: "post",
            data: {
                'bigTitleInfo': bigTitleInfo
            },
            success: function (data) {
                $('#bigTitleInfo').attr('disabled', true);
                $("#noteTitle").remove();
            },
            error: function (errormsg) {

            }
        });
    });
</script>


</body>
</html>
